// 关联路由
<template>
  <el-dialog
    v-el-drag-dialog="{updataFull, updataDialogWidth}"
    :fullscreen="isfullscreen"
    :title="$t('ASSOCIATED_LINK_SEGMENT')"
    :visible="dialogVisible"
    :width="setDialogWidth('80%')"
    @close="close"
  >
    <el-table :data="tableData" style="width: 100%;" height="400" border>
      <template slot="empty">
        <NullData />
      </template>
      <el-table-column
        :label="$t('SEQUENCE')"
        align="center"
        type="index"
        :width="resetSize(60)"
      />
      <el-table-column
        v-for="item in tableHead"
        :key="item.label"
        :prop="item.prop"
        :label="$t(item.label)"
        :align="item.align"
        :formatter="item.formatter"
        show-overflow-tooltip
        min-width="120px"
        :width="item.width"
      />
    </el-table>
    <span slot="footer">
      <el-button @click="close">{{ $t('CLOSE') }}</el-button>
      <el-button type="primary" @click="queryList">{{
        $t('REFRESH')
      }}</el-button>

    </span>
  </el-dialog>
</template>
<script>
  import { mapGetters } from 'vuex'
  import logicSegmentApi from '@/api/oen/LogicSegmentApi'

  export default {
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      node: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        tableHead: [
          {
            label: 'LINK_SEGMENT_NAME',
            prop: 'segmentName'
          },
          {
            label: 'LINK_LOSS_THRESHOLD',
            prop: 'linkLossSill',
            width: 150
          },
          {
            label: 'AVERAGE_LOSS_THRESHOLD',
            prop: 'avgLossSill',
            width: 180
          },
          {
            label: 'TIP_LENGTH',
            prop: 'endLengthSill',
            width: 140
          },
          {
            label: 'A_END_STATION_NAME',
            prop: 'startStationName'
          },
          {
            label: 'ANODE',
            prop: 'startNode.nodeName'
          },
          {
            label: 'NODE_NUM',
            prop: 'routeLength',
            formatter(row) {
              return row.networkSegmentList.length - 1
            }
          },
          {
            label: 'Z_END_STATION',
            prop: 'endStationName'
          },
          {
            label: 'ZNODE',
            prop: 'endNode.nodeName'
          }
        ],
        tableData: []
      }
    },
    computed: {
      ...mapGetters(['baseRegionList'])
    },
    mounted() {
      this.node.nodeId && this.queryList()
    },
    methods: {
      queryList() {
        this.tableData = []
        logicSegmentApi.queryList({ stationId: this.node.nodeId })
          .then(res => {
            if (res && res.length) {
              this.tableData = res.map(i => {
                return {
                  ...i,
                  routeLength: i.routeLength - 2,
                  linkLossSill: i.logicSegment
                    ? i.logicSegment.map(j => j.linkLossSill || '--').join()
                    : '',
                  avgLossSill: i.logicSegment
                    ? i.logicSegment.map(j => j.avgLossSill || '--').join()
                    : '',
                  endLengthSill: i.logicSegment
                    ? i.logicSegment.map(j => j.endLengthSill || '--').join()
                    : '',
                  startStationName: this.getRegionName(i.startStationId),
                  endStationName: this.getRegionName(i.endStationId)
                }
              })
            }
          })
          .catch(err => {
            console.log(err)
          })
      },
      // 获取区域/站点/机房
      getRegionName(stationId) {
        const stationData = this.baseRegionList.find(
          i => i.regionId === stationId
        )
        return stationData ? stationData.regionName : ''
      },
      close() {
        this.$emit('update:dialogVisible', false)
      }
    }
  }
</script>
